<template>
  <div class="wrapper">
    <el-button @click="getDatas5">查询5条数据</el-button>
    <el-button @click="getDatas8">查询8条数据</el-button>
    <el-button @click="getDatas">查询暂无数据</el-button>
    <div class="chart-wrapper">
      <chart-move
        ref="chart"
        height="100%"
        width="100%"
        :moveLen="moveLen"
        :speed="speed"
        isHighlight
        :noData="noData"
        @sendIndex="getIndex"
      ></chart-move>
    </div>
  </div>
</template>

<script>
import ChartMove from "@/components/chart/ChartMove";
export default {
  components: { ChartMove },
  props: {},
  data() {
    return {
      datas: [],
      datas5: [
        {
          name: "互感器一",
          value: 10,
          value1: 10,
        },
        {
          name: "互感器二",
          value: 8,
          value1: 7,
        },
        {
          name: "互感器三",
          value: 12,
          value1: 7,
        },
        {
          name: "互感器四",
          value: 1,
          value1: 7,
        },
        {
          name: "互感器五",
          value: 9,
          value1: 7,
        },
      ],
      datas8: [
        {
          name: "互感器一",
          value: 10,
        },
        {
          name: "互感器二",
          value: 8,
        },
        {
          name: "互感器三",
          value: 12,
        },
        {
          name: "互感器四",
          value: 1,
        },
        {
          name: "互感器五",
          value: 9,
        },
        {
          name: "互感器六",
          value: 10,
        },
        {
          name: "互感器七",
          value: 16,
        },
        {
          name: "互感器八",
          value: 3,
        },
      ],
      noData: false,
      moveLen: 5, //轮播长度限制
      speed: 3000, // ；轮播速度
      value: "",
    };
  },
  created() {},
  mounted() {
    this.getDatas5();
  },
  activated() {},
  updated() {},
  methods: {
    // 获取5条数据
    getDatas5() {
      this.datas = this.datas5;
      this.noData = false;
      this.$nextTick(() => {
        this.init(this.datas);
      });
    },
    // 获取8条数据
    getDatas8() {
      this.datas = this.datas8;
      this.noData = false;
      this.$nextTick(() => {
        this.init(this.datas);
      });
    },
    // 获取0条数据
    getDatas() {
      this.datas = [];
      this.noData = true;
      this.$nextTick(() => {
        this.init(this.datas);
      });
    },
    // 处理数据，渲染图表
    init(data) {
      // 判断有无数据
      if (!data.length) {
        return;
      }

      // 处理数据
      let xData = [];
      let yData = [];
      let yData1 = [];
      data.forEach((item, index) => {
        xData.push(item.name);
        yData.push(item.value);
        yData1.push(item.value);
      });

      // 处理配置
      const baseOptions = {
        xAxis: {
          type: "category",
          name: "互感器(台)",
          data: xData,
          nameLocation: "end",
          nameTextStyle: {
            color: "#000",
            fontSize: 14,
            align: "right",
            padding: 30,
          },
          axisLabel: {
            show: true,
            color: "#000",
            fontSize: 16,
            rotate: 30,
            interval: 0,
            margin: 20,
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "red",
            },
            onZero: true,
          },
        },
        yAxis: [
          {
            type: "value",
            name: "比差评估值(%)",
            axisLabel: {
              show: true,
              color: "#000",
              fontSize: 14,
              formatter: (params) => {
                return params;
              },
            },
            nameGap: 20,
            nameTextStyle: {
              color: "#000",
              fontSize: 14,
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: "#000",
              },
            },
            splitLine: {
              show: false, // 分割线
            },
            axisLine: {
              lineStyle: {
                color: "#68768B",
              },
              onZero: true,
            },
          },
        ],
        series: {
          type: "bar",
          barGap: "110%",
          data: yData,
          barWidth: 10,
          yAxisIndex: 0,
          label: {
            show: true,
            fontSize: 14,
          },
          emphasis: {
            barWidth: 15,
            itemStyle: {
              borderWidth: 2,
              color: "#03c1ff",
              shadowColor: "rgba(0,192,255,1)",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 30,
              borderColor: "#03c1ff",
            },
          },
          zlevel: 1000,
        },
        // series: [
        //   {
        //     type: "bar",
        //     barGap: "110%",
        //     data: yData,
        //     barWidth: 10,
        //     yAxisIndex: 0,
        //     label: {
        //       show: true,
        //       fontSize: 14,
        //     },
        //     emphasis: {
        //       barWidth: 15,
        //       itemStyle: {
        //         borderWidth: 2,
        //         color: "#03c1ff",
        //         shadowColor: "rgba(0,192,255,1)",
        //         shadowOffsetX: 0,
        //         shadowOffsetY: 0,
        //         shadowBlur: 30,
        //         borderColor: "#03c1ff",
        //       },
        //     },
        //     zlevel: 1000,
        //   },
        //   {
        //     type: "bar",
        //     barGap: "110%",
        //     data: yData1,
        //     barWidth: 10,
        //     yAxisIndex: 0,
        //     label: {
        //       show: true,
        //       fontSize: 14,
        //     },
        //     emphasis: {
        //       barWidth: 15,
        //       itemStyle: {
        //         borderWidth: 2,
        //         color: "#03c1ff",
        //         shadowColor: "rgba(0,192,255,1)",
        //         shadowOffsetX: 0,
        //         shadowOffsetY: 0,
        //         shadowBlur: 30,
        //         borderColor: "#03c1ff",
        //       },
        //     },
        //     zlevel: 1000,
        //   },
        // ],
        grid: {
          bottom: 50,
          top: 120,
          left: 100,
          right: 110,
        },
      };

      this.$refs["chart"].initChart(baseOptions);
    },
    // 获取子组件的索引
    getIndex(value){
        console.log('轮播或高亮的索引',value)
    },
    getList() {
      for (let i = 0; i < 10; i++) {
        this.list.push({
          id: i,
          name: "互感器" + i,
          angle: Math.round(Math.random() * 100),
          ratio: Math.round(Math.random() * 100),
        });
      }
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.chart-wrapper {
  width: 700px;
  height: 500px;
  background: #eee;
  margin: 10px auto;
}
</style>
